<template>
    <div class="banxin products_list">
      <ul>
        <li v-for="item in src" :key="item.id">
            <img src="../../assets/images/home/hot-j.png" alt="" class="hot_j" v-show="item.isHotSale === 1">
            <img src="../../assets/images/home/new-j.png" alt="" class="hot_j" v-show="item.isLatest === 1">
            <img :src=" 'http://sc.wolfcode.cn' + item.coverImg" alt="" class="coverImg">
            <p>{{item.name}}</p>
            <p class="jifen">
                {{item.coin}}<img src="../../assets/images/home/monad.png" alt="" width="20px">
            </p>
            <p class="duihuan">立即兑换</p>
        </li>
      </ul>
    </div>
</template>

<script>
export default {
    data () {
        return {}
    },
    props:["src"]
}

</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.products_list {
    width: 100%;
    margin-top: 20px;
    padding-bottom: 40px;
    ul{
        display: flex;
        text-align: center;
        flex-wrap: wrap;
        li {
            cursor: pointer;
            height: 412px;
            width: 285px;
            background: #FFFFFF;
            margin-right: 20px;
            margin-top: 20px;
            position: relative;
            transition: 1s;
            &:hover {
                transform: translateY(-10px);
                transition: 1s;
                box-shadow: 0 0 10px rgba(0,0,0,0.5);
                .duihuan {
                    background-color: @blue;
                    color: #fff;
                    cursor: pointer;
                }
            }
            &:nth-child(4n){
                margin-right: 0;
            }
            .coverImg {
                height: 250px;
                width: 100%;
            }
            .hot_j{
                position: absolute;
                top: 0;
                left: 0;
            }
            .new_j{
                position: absolute;
                top: 0;
                left: 0;
            }
            p {
                font-size: 18px;
                font-family: SourceHanSansSC;
                font-weight: 300;
                color: #333333;
                line-height: 23px;
                margin: 20px auto;
                &.jifen {
                    font-weight: bold;
                    color: #FD604D;
                }
                &.duihuan {
                    width: 100px;
                    line-height: 36px;
                    border: 1px solid @blue;
                    color: @blue;
                    box-sizing: border-box;
                    text-align: center;
                    cursor: pointer;
                }
            }
        }
    }
}

</style>